﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>关于Yongjin.C</title>
    <meta name="author" content="Yongjin.C" />
    <meta name="description" content="Yongjin.C，90后软件攻城师，全栈开发实践者。" />
    <meta name="keywords" content="Yongjin.C,blog,nodejs,软件攻城师,C#" />
    <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="asset/page.css?v=4">
    <link rel="stylesheet" href="asset/css/font-awesome.css?v=4">
    <style type="text/css">
        .l-loading {
            position: relative;
            display: block;
            margin: auto;
            height: 50px;
            width: 50px;
            border: 1px solid #555;
            border-radius: 50%;
            animation: loading-rond 2s infinite;
            -webkit-animation: loading-rond 2s infinite;
            -moz-animation: loading-rond 2s infinite;
        }

            .l-loading:after {
                content: '';
                position: absolute;
                height: 8px;
                width: 8px;
                top: -4px;
                left: 50%;
                margin-left: -4px;
                background: #555;
                border-radius: 100%;
            }

        @-moz-keyframes loading-rond {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes loading-rond {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes loading-rond {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        .app_mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5000;
        }

            .app_mask:after, .app_mask:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 50%;
                left: 0;
                background: #fff;
                border-color: #ccc;
                border-style: solid;
            }

            .app_mask:before {
                top: 0;
                border-width: 0 0 1px;
            }

            .app_mask:after {
                bottom: 0;
                border-width: 1px 0 0;
            }

            .app_mask.app_mask_out:before, .app_mask.app_mask_out:after {
                height: 0;
                transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                -webkit-transition: all .3s ease-in;
                -o-transition: all .3s ease-in;
                transition-delay: .5s;
                -moz-transition-delay: .5s;
                -webkit-transition-delay: .5s;
                -o-transition-delay: .5s;
            }

            .app_mask.app_mask_out .app_mask_cnt {
                transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                -webkit-transition: all .4s ease-in;
                -o-transition: all .4s ease-in;
                opacity: 0;
            }

        .app_mask_cnt {
            position: absolute;
            bottom: 50%;
            left: 50%;
            width: 200px;
            height: 70px;
            margin-left: -100px;
            z-index: 1;
        }

            .app_mask_cnt p {
                padding-top: 20px;
                font-size: 18px;
                text-align: center;
            }

        .rotate90 {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .github-widget-loading {
            line-height: 100px;
            text-align: center;
            font-size: 24px;
            color: #aaa;
        }

        .github-user-widget_body {
            max-width: 300px;
            margin: auto;
            overflow: hidden;
            background: #fff;
            box-shadow: 1px 2px 16px rgba(0,0,0,.2);
        }

        .gitUW_avatar {
            display: block;
            overflow: hidden;
        }

            .gitUW_avatar img {
                display: block;
                width: 100%;
                min-height: 100px;
                background: #333;
                -webkit-transition: 0.3s;
                -moz-transition: 0.3s;
                transition: 0.3s;
            }

            .gitUW_avatar:hover img {
                -webkit-transform: scale(1.3);
                -moz-transform: scale(1.3);
                transform: scale(1.3);
            }

        .gitUW_name {
            display: block;
            padding: 10px 10px 15px;
            border-bottom: 1px solid #eee;
            -webkit-transition: 0.4s;
            -moz-transition: 0.4s;
            transition: 0.4s;
        }

            .gitUW_name strong {
                display: block;
                width: 100%;
                overflow: hidden;
                font-size: 26px;
                color: #333;
                line-height: 30px;
                text-overflow: ellipsis;
            }

            .gitUW_name span {
                display: block;
                width: 100%;
                /* font-size: 20px;*/
                font-style: normal;
                font-weight: 300;
                line-height: 24px;
                color: #666;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .gitUW_name:hover {
                background: #eee;
            }

        .gitUW_info {
            padding: 10px 0 20px;
        }

            .gitUW_info p {
                height: 25px;
                padding-left: 10px;
                text-overflow: ellipsis;
                overflow: hidden;
            }

                .gitUW_info p span, .gitUW_info p a {
                    display: inline-block;
                    vertical-align: text-top;
                    height: 25px;
                    line-height: 25px;
                    font-size: 14px;
                }

                .gitUW_info p a {
                    color: #4183c4;
                    text-decoration: none;
                }

                    .gitUW_info p a:hover {
                        text-decoration: underline;
                    }

                .gitUW_info p span {
                    color: #333;
                }

        .gitUW_count {
            height: 75px;
            background: #333;
        }

            .gitUW_count a {
                display: block;
                float: left;
                width: 33.33%;
                padding: 15px 0;
                text-align: center;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                transition: 0.4s;
            }

                .gitUW_count a strong {
                    display: block;
                    line-height: 30px;
                    font-size: 28px;
                    font-weight: bold;
                    color: #4183c4;
                }

                .gitUW_count a span {
                    display: block;
                    line-height: 15px;
                    font-size: 12px;
                    color: #999;
                }

                .gitUW_count a:hover {
                    background: #444;
                }

        .gitUW_ico_company, .gitUW_ico_location, .gitUW_ico_email, .gitUW_ico_blog, .gitUW_ico_created_at {
            display: inline-block;
            vertical-align: text-top;
            width: 25px;
            height: 25px;
            background-image: url();
        }

        .gitUW_ico_company {
            background-position: 0 0;
        }

        .gitUW_ico_location {
            background-position: 0 -25px;
        }

        .gitUW_ico_email {
            background-position: -25px 0;
        }

        .gitUW_ico_blog {
            background-position: -25px -25px;
        }

        .gitUW_ico_created_at {
            background-position: -50px 0;
        }

        .heartbeat {
            visibility: visible;
            -webkit-animation-duration: 2s;
            -webkit-animation-delay: 300ms;
            -webkit-animation-iteration-count: infinite;
        }
    </style>
    <script src="build/dist/echarts.js"></script>
</head>
<body>
    <div class="section " id="header">
        <div class="header_body">
            <div class="logo wow flipInY" data-wow-delay=".1s">
                <i class="fa fa-github-square"></i>
            </div>
            <div class="intro wow bounceInUp" data-wow-delay=".1s">
                <h1>Call me Yongjin.C</h1>
                <p>90后处女男，软件工程师、全栈开发尝试者</p>
                <p><a href="/" class="btn" target="_self">回到首页</a></p>
            </div>
        </div>
        <div class="down wow bounceInUp" data-wow-delay=".5s">
            <a href="javascript:void(0)"><i class="fa fa-angle-double-down fa-6"></i></a>
        </div>
    </div>
    <div class="section" id="work">
        <div class="app_mask">
            <div class="app_mask_cnt">
                <span class="l-loading"></span>
            </div>
        </div>
        <div class="intro wow fadeInLeft animated">
            <h2>关于工作</h2>
            <p>现就职于<a href='http://www.hznzcn.com/' target="_blank">杭州女装网</a></p>
            <div class="intro wow pulse animated heartbeat"
                 data-wow-delay="300ms"
                 data-wow-iteration="infinite"
                 data-wow-duration="2s">
                <p>任C#.net软件工程师</p>
            </div>
            <p>参与女装网维护扩展开发，负责微信开发</p>
            <p><img src="asset/hznz.jpg" style="width: 25%" /></p>
            <br />
            <p>
                前就职于<a href='http://www.zibolan.com/' target="_blank">紫博蓝</a>，服务于<a href="http://companyadc.51job.com/companyads/2015/hz/daoxiang0610_8716wh/index.htm" target="_blank">杭州导向</a>，任C#.net软件工程师,兼网管
            </p>
            <p>
                主参与项目：<a href="http://www.haipiquan.cn/" target="_blank">海皮圈,互联网供应链平台运营</a><br /><a href="http://hcp.21688.com/" target="_blank">易带易路,中国好产品源头供应链</a>

            </p>
        </div>
    </div>
    <div class="section" id="nodejs">
        <div class="wrap">
            <div class="half3 wow fadeInLeftBig">
                <h2>关于开发</h2>
                <p>习惯C#开发,偶尔捡一下java</p>
                <p>个人喜欢前端js</p>
                <p>患有不是很严重的代码洁癖</p>
            </div>
            <div class="half wow fadeInRight">
                <div id="main" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
            </div>
        </div>
    </div>
    <div class="section" id="github">
        <div class="intro wow fadeInLeft">
            <h2>Git@OSC忠实粉</h2>
            <p>逛OSChina,Github,学习优秀的开源代码</p>
            <br />
            <p>年少无知，只能不断学习，曾毫不顾忌地造了不少轮子。</p>
        </div>
        <div class="github-widget-user wow fadeInRight" style="visibility: visible;">
            <div class="github-user-widget_body">
                <a class="gitUW_avatar"
                   href="https://git.oschina.net/yongjinc/EchartsCShape" title="yongjin.c的git">
                    <div class=" wow pulse animated heartbeat"
                         data-wow-delay="300ms"
                         data-wow-iteration="infinite"
                         data-wow-duration="2s">
                        <img src="./asset/1.jpg" alt="">
                    </div>
                </a>
                <a class="gitUW_name" href="https://git.oschina.net/yongjinc/EchartsCShape">
                    <strong>Yongjin.C</strong>
                    <span>人生的价值在于追求</span>
                </a>
                <div class="gitUW_info">
                    <p>
                        <i class="gitUW_ico_company"></i>
                        <span>杭州女装网</span>
                    </p><p>
                        <i class="gitUW_ico_location"></i>
                        <span>金华, 浙江</span>
                    </p><p>
                        <i class="gitUW_ico_email"></i>
                        <a href="mailto:995292291@qq.com">995292291@qq.com</a>
                    </p><p>
                        <i class="gitUW_ico_blog"></i>
                        <a href="http://hi.baidu.com/cyj_memory" target="_blank">baidu空间</a>
                    </p><p><i class="gitUW_ico_created_at"></i><span>2015 - 3 - 1 加入</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="links">
        <div class="wrap">
            <h2 class="wow fadeInLeft">常在这些不健康场所虚度光阴</h2>
            <p class="wow fadeInLeft">偶尔四国,天黑请闭眼,看点小说,刷下轮滑。闲来无事爱看博客园,撸起代码就会淘Github/OSChina,偷点儿灵感。</p>
            <p class="wow fadeInRight">一打开电脑就Baidu/Google,这是最好的老师......</p>
            <p class="wow flipInY">蹦达蹦达w3cschool菜鸟教程</p>
            <div class="icons wow fadeInUp">
                <a href="https://github.com/" title="github">
                    <i class="fa fa-github"></i>
                    <strong>Github</strong>
                </a>
                <a href="https://git.oschina.net/yongjinc/EchartsCShape" title="Git@OSC">
                    <i class="fa fa-circle-o-notch rotate90"></i>
                    <strong>Git@OSC</strong>
                </a>
                <a href="http://www.w3cschool.cc/" title="W3Cschool.cc">
                    <i class="fa fa-globe"></i>
                    <strong>W3Cschool</strong>
                </a>
            </div>
        </div>
    </div>
    <div class="section" id="footer">没想好这块儿写什么！</div>
    <div class="section_loading"><p>玩命儿加载中……</p></div>
    <script src="asset/jquery.min.js"></script>
    <script src="asset/wow.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.app_mask').addClass('app_mask_out');
            setTimeout(function () {
                $('.app_mask').remove();
            }, 1500)
            new WOW({
                times: false
            }).init();

            $('.section_loading').fadeOut(400, function () {
                $(this).remove();
            });
            $('.down').click(function () {
                $('html,body').animate({
                    scrollTop: $('#header').outerHeight()
                }, 300);
            });
        });
    </script>
    <script>

        require.config({
            paths: {
                echarts: 'build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
              'echarts/chart/pie'//,'echarts/chart/funnel'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    title: {
                        text: '开发技能',
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br />{b} : {c} ({d}%)"
                    },
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: ['C#.NET', 'Java', 'Js/jQuery', 'NodeJS', 'MongoDB', 'MySql', 'SQLServer']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: true
                            },
                            magicType: {
                                show: true,
                                type: [
                                    'pie'//,
                                   // 'funnel'
                                ]
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    calculable: true,
                    series: [
                       {
                           name: '占比例',
                           type: 'pie',
                           radius: [
                               20,
                               70
                           ],
                           center: [
                               '25%',
                               150
                           ],
                           roseType: 'area',
                           //x: '50%',
                           max: 40,
                           sort: 'ascending',
                           data: [
                               {
                                   value: 250,
                                   name: 'C#.NET'
                               },
                               {
                                   value: 150,
                                   name: 'Js/jQuery'
                               },
                               {
                                   value: 120,
                                   name: 'SQLServer'
                               },
                               {
                                   value: 80,
                                   name: 'NodeJs'
                               },
                               {
                                   value: 60,
                                   name: 'MongoDB'
                               },
                               {
                                   value: 55,
                                   name: 'Java'
                               },
                               {
                                   value: 40,
                                   name: 'MySql'
                               }
                           ]
                       }
                      , {
                          name: '占比例',
                          type: 'pie',
                          radius: [
                              20,
                              70
                          ],
                          center: [
                              '65%',
                              150
                          ],
                          roseType: 'radius',
                          //width: '40%',
                          max: 40,
                          itemStyle: {
                              normal: {
                                  label: {
                                      show: false
                                  },
                                  labelLine: {
                                      show: false
                                  }
                              },
                              emphasis: {
                                  label: {
                                      show: true
                                  },
                                  labelLine: {
                                      show: true
                                  }
                              }
                          },
                          data: [
                              {
                                  value: 250,
                                  name: 'C#.NET'
                              },
                              {
                                  value: 150,
                                  name: 'Js/jQuery'
                              },
                              {
                                  value: 120,
                                  name: 'SQLServer'
                              },
                              {
                                  value: 80,
                                  name: 'NodeJs'
                              },
                              {
                                  value: 60,
                                  name: 'MongoDB'
                              },
                              {
                                  value: 55,
                                  name: 'Java'
                              },
                              {
                                  value: 40,
                                  name: 'MySql'
                              }
                          ]
                      }

                    ]
                };
                myChart.setOption(option);
            }
        );
    </script>
</body>
</html>
